import React, { FC, useRef, useEffect, useMemo, useState, useCallback } from 'react';

import {
  Form, Input, Button, Select, InputNumber, Upload, Cascader, message
} from 'antd'

import { UploadOutlined, InboxOutlined } from '@ant-design/icons';

import { baseUrl } from '../../network/myFetch'

import Cookies from 'js-cookie'

const normFile = (e: any) => {
  if(e.file.status === 'done') {
    if(e.file.response.errorCode === 0) {
      message.success('批量创建成功')
    } else {
      message.success('图片上传失败')
    }
  }
};

const formItemLayout = {
  labelCol: { span: 2 },
  wrapperCol: { span: 14 },
}

const Batch: FC = (props: any) => {
  const onFinish = (values: any) => {
    console.log('Received values of form: ', values);
  };


  return <Form
    name="validate_other"
    {...formItemLayout}
    onFinish={onFinish}
    labelAlign='left'
  >

    <Form.Item label="Dragger">
      <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
        <Upload.Dragger
          name="file"
          //  action="/upload.do"
          action={`${baseUrl}/artwork_sys/admin/artworks`}
          headers={{ token: Cookies.get('token') }}
          onChange={normFile}
        >
          <p className="ant-upload-drag-icon">
            <InboxOutlined />
          </p>
          <p className="ant-upload-text">Click or drag file to this area to upload</p>
          <p className="ant-upload-hint">Support for a single or bulk upload.</p>
        </Upload.Dragger>
      </Form.Item>
    </Form.Item>
  </Form>

}


export default Batch